<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul>
  <li class="item1">1</li>
  <li class="item2">2</li>
  <li class="item3">3</li>
  <li class="item4">4</li>
  <li class="item5">5</li>
  <li class="item6">6</li>
  <li class="item7">7</li>
  <li class="item8">8</li>
  <li class="item9">9</li>
  <li class="item10">10</li>
</ul>
<script>
  var ul = document.getElementsByTagName('ul')[0];

  //  methods(1)
  var li = document.getElementsByTagName('li');
  var len = li.length;
  //用的let
  // for(let i=0;i<len;i++){
  //  li[i].onclick=function () {
  //    console.log(i)
  //  }
  // }


  // for(var i=0;i<len;i++){
  //   (function (i) {
  //     li[i].onclick=function () {
  //       console.log(i)
  //     }
  //   })(i)
  // }

  ul.onclick = function (e) {
    if (e.target.tagName.toLowerCase() === 'li') {
      var targetLi = e.target;
      console.log(this);
      var li = document.createElement('li');
      li.innerHTML = 'text';
      console.log(li);
       this.appendChild(li)
      //alert(targetLi.innerHTML-1)
      // var targetli = e.target.tagName.toLowerCase();
      // alert(targetli)
    }

  }
</script>
</body>
</html>